<template>
  <div class="miningCell items-center">
    <!-- 头像 -->
    <ImgNuxt
      class="miningCell-avatar"
      :src="item.avatar || file.avatarDefault"
      :placeholder="file.avatarDefault"
      isHttp
    />
    <!-- 信息 -->
    <div class="miningCell-info items-center">
      <!-- 昵称 -->
      <div class="miningCell-info-nick">
        {{ item.nickname ? item.nickname.substring(0, 11) : "--" }}
        <span style="margin-left: -4px">
          {{ item.nickname && item.nickname.length > 11 ? "..." : "" }}
        </span>
      </div>
      <!-- BDC -->
      <div class="miningCell-info-bdc">+{{ item.acquireAmount }} BDC</div>
    </div>
  </div>
</template>
<script setup name="miningCell">
const props = defineProps({
  item: {
    type: Object,
    default: [],
  },
});

const file = getOssFileUrl({
  avatarDefault: "/image/avatar-default.png",
});

// const { t } = useI18n();

// onMounted(() => {});
</script>
<style lang="scss" scoped>
.miningCell {
  padding: 4 * 2px 0 * 2px;
  margin-right: 10 * 2px;

  &-avatar {
    width: 22 * 2px;
    height: 21 * 2px;
    border-radius: 100px;
    overflow: hidden;
    border: 1px solid #fff;
    margin-right: 8 * 2px;
    position: relative;
    z-index: 9;
  }

  &-info {
    position: relative;
    z-index: 8;
    background: linear-gradient(
      90deg,
      rgba(0, 123, 255, 0.4) 0%,
      rgba(0, 123, 255, 0) 100%
    );
    padding: 2.5 * 2px 10 * 2px 2.5 * 2px 15 * 2px;
    margin-left: -12 * 2px;

    &-nick {
      color: #002853;
      font-size: 11 * 2px;
      font-weight: 400;
      white-space: nowrap;
      margin-right: 10 * 2px;
    }

    &-bdc {
      color: #007bff;
      font-size: 11 * 2px;
      font-weight: 590;
      white-space: nowrap;
    }
  }
}
</style>
